<template>
    <h2>正常数据</h2>
    <p>{{ id }}</p>
    <p>{{ username }}</p>
    <p>{{ user }}</p>
    <p>{{ user.id }}--{{ user.username }}--{{ user.password }}</p>
    <p>{{ emp }}</p>
    <p>{{ hobbies }}</p>
    <p>{{ hobbies[0] }}--{{ hobbies[1] }}--{{ hobbies[2] }}</p>
    <p>{{ status }}</p>
    <button @click="f1">测试ref</button>
    <button @click="f2">测试reactive</button>

    <!-- 
        对于非正常数据null、undefined、NaN
        其中NaN在页面正常打印NaN
        null、undefined在页面中没有任何效果,相当于没有打印
    -->
    <h2>非正常数据</h2>
    <p>{{ test }}</p>
    <p>{{ test2 }}</p>
    <p>{{ test3 }}</p>

    <h2>JS表达式</h2>
    <p>{{ num2 + num }}</p>
    <p>{{ num2 - num }}</p>
    <p>{{ num2 * num }}</p>
    <p>{{ num2 / num }}</p>
    <p>{{ num2 % num }}</p>
    <p>{{ num2 > num1 ? 'num2大' : 'num2不比num大' }}</p>
    <!-- 当直接定义值的时候,必须加引号,如果没有引号,默认是取数据仓库中指定key的数据 -->
    <p>{{ admin }}</p>
    <p>{{ 'admin' }}</p>
    <p>{{ 1 }}</p>
    <p>{{ true }}</p>
    <p>{{ false }}</p>
    <p>{{ true && false }}</p>
    <p>{{ true || false }}</p>

    <h2>JS内置对象</h2>
    <p>{{ new Date() }}</p>
    <p>{{ Math.random() }}</p>
    <p>{{ Math.PI }}</p>
</template>
<script setup>
import { reactive, ref } from 'vue';

const id = ref(1);
const username = ref('admin')
const password = ref('123456')
// const user = ref({id: 2,username: 'jack',password: '111111'})
// 对象的属性值可以是已定义的数据
// const user = ref({id: id,username: username,password: password})
// 当遇到属性名与属性值相同的时候,可以省略属性值
// 简写方式
const user = ref({ id, username, password })
function f1() {
    // 访问时必须通过value属性
    // console.log(user.id)    // 无法访问
    console.log(user.value.id)
    // user.value.id = 2;
    user.value = ref({id: 2,username: 'jack',password:'666666'})
}

// 对于对象,还可以通过reactive来定义
const emp = reactive({ id: 1, name: 'admin', age: 18 })
function f2() {
    // 对于reactive,可以直接通过对象.属性进行访问
    console.log(emp.name)
    // emp.name = 'lucy'
    emp = reactive({id: 3,name:'alex',age: 20})
}

const hobbies = ref(['吃饭','睡觉','学Java'])
const status = ref(true)

// 非正常数据
const test = ref(null)
const test2 = ref(undefined)
const test3 = ref(NaN)


const num = ref(2)
const num2 = ref(3)

</script>